<template>
    <div class="download">
        <span @click="toggleDownloadPopup">×</span>
        <div class="warp">
            <!-- <img src="../../assets/banner3.png" class="left" alt=""> -->
            <div class="right">
                <!-- <img src="../../assets/code.png" alt=""> -->
            </div>
        </div>
    </div>
</template>
<script>
    import { mapMutations } from 'vuex';
    export default {
        methods: {
            ...mapMutations(['toggleDownloadPopup'])
        }
    }
</script>
<style lang="less" scoped>
    .download {
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        height: 160px;
        z-index: 998;
        background: rgba(0,0,0,.9);
        span{
            display: inline-block;
            position: fixed;
            bottom: 128px;
            right: 15px;
            width: 24px;
            height: 24px;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }
        .warp{
            position: relative;
            width: 1000px;
            height: 100%;
            margin: 0 auto;
            .left{
                position: absolute;
                bottom: 0;
                left: 30px;
            }
            .right{
                position: absolute;
                bottom: 0;
                right: 45px;
                height: 186px;
                width: 194px;
                background: url('https://www.manydoctor.com/static/img/phone.png') center center no-repeat;
                img{
                    position: absolute;
                    top: 52px;
                    left: 41px;
                    transition: all .5s;
                    width: 110px;
                    cursor: pointer;
                    &:hover{
                        width: 130px;
                        left: 31px;
                        top: 30px;
                    }
                }
            }
        }
    }
</style>
